<template>
  <div>
    <div>
      <Header></Header>
    </div>

    <div>
      <movies_subnav></movies_subnav>
      <movies_tags></movies_tags>
    </div>
    <div class="movies-sorter" style="padding-left: 15%">
      <div class="cat-sorter">
        <input type="radio" v-model="radio" value="1">按时间排序&nbsp;&nbsp;
        <input type="radio" v-model="radio" value="2">按评分排序
      </div>
      <div class="movies-img" v-for="movies in classicMovieList" :key="movies.filmId" >
        <img :src="movies.cover" alt="">
        <h3>{{movies.filmName}}</h3>
        <h3 style="color:#ffc20e ">评分{{movies.score}}</h3>
      </div>
    </div>
  </div>
</template>

<script>
    import {mapActions,mapGetters}  from 'vuex'
    import Header from "../Header/Header";
    import Movies_subnav from "./movies_subnav";
    import movies_tags from "./movies_tags";
    export default {
      name: "movies_right",
      data(){
        return{
          radio:'1',
        }
      },
      components: {Movies_subnav, Header,movies_tags},
      methods:{
        ...mapActions(['getClassicMovies'])
      },
      mounted(){
        this.getClassicMovies();
      },
      computed:{
        ...mapGetters(['classicMovieList'])
      }
    }
</script>

<style scoped>
  .movies-img {
    /*margin-right: 10%;
    margin-left: 10%;*/
    float: left;
    padding: 20px 15px;
  }
  img{
    width: 200px;
    height: 250px;
    padding: 0 0;
  }
  h3{
    size: 15px;
    margin-top: 10px;
    text-align: center;
  }
  .cat-sorter{
    padding-left: 20px;
    padding-top: 20px;
    color: #454545;
    font-size: 14px;
  }
</style>
